<template>
 
  <view class="text_box">
   <view class="rectangle"></view>
   <view class="circle">
     <uni-icons
       type="closeempty"
       color="#fff"
       size="44"
     
     style="transform: translateY(50px);"
     />
     <!-- <img class="info_img" src="/static/success.png" alt=""> -->
     <view class="info_text">支付失败</view>
   </view>
   <view class="info">
    <recomend></recomend>
  </view>
  </view>
 
  </template>
  
  <script setup  lang="ts">
import {http} from '@/utlis/http.ts'
  
  import {ref} from 'vue'
 import recomend from './components/recomend.vue'
  </script>
  
  <style lang="scss">
   page{
     background-color: #fff;
   }
   $hei:50px;
 .text_box{
   position: absolute;
   width: 100%;
   .rectangle{
     position: absolute;
     top:0;
     width: 100%;
     height: $hei;
     background-color: aquamarine;
   }
   .circle{
     $c_hei:375px;
     display: flex;
   justify-content: center;
   align-items: center;
   
     position: absolute;
     top:$hei -  calc($c-hei /2);
     width: 100%;
     height: $c_hei;
     background-color: aquamarine;
     border-radius: 50%;
     color: #fff;
     letter-spacing: 0.12em;
    font-size: 20px;
    
     font-weight: 500;
     .info_text{
       transform: translateY(50px);
 
     }
     .info_img{
       $wid:40px;
       width: $wid;
       height: $wid;
     transform: translateY(20px);
 
     }
   }
 }
 .info{
   z-index: 999;
   margin-top: 239px;
 }
  </style>